import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    Image,
    View,
    WebView,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import {Navigator} from 'react-native-deprecated-custom-components'
import HumanAirport from './HumanAirport'
import GreenAirport from './GreenAirport'
import WitAirport from './WitAirport'
import MyInfo from './MyInfo'
import WorkTool from './WorkTool'
const tabBarHeight = 55;

export default class HomePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'tab1',
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <TabNavigator
                    tabBarStyle={styles.tabBarStyle}
                >
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'tab1'}
                        selectedTitleStyle={{color: '#387ef5'}}
                        title="人文机场"
                        titleStyle={styles.titleStyle}
                        renderIcon={() => <Image style={styles.image}
                                                 source={require('../../res/images/ic_polular.png')}/>}
                        renderSelectedIcon={() => <Image style={[styles.image, {tintColor: '#387ef5'}]}
                                                         source={require('../../res/images/ic_polular.png')}/>}
                        onPress={() => this.setState({selectedTab: 'tab1'})}>
                        <HumanAirport/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'tab2'}
                        title="绿色机场"
                        titleStyle={styles.titleStyle}
                        selectedTitleStyle={{color: '#387ef5'}}
                        renderIcon={() => <Image style={styles.image}
                                                 source={require('../../res/images/ic_trending.png')}/>}
                        renderSelectedIcon={() => <Image style={[styles.image, {tintColor: '#387ef5'}]}
                                                         source={require('../../res/images/ic_trending.png')}/>}
                        onPress={() => this.setState({selectedTab: 'tab2'})}>
                        <GreenAirport/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'tab3'}
                        title="智慧机场"
                        titleStyle={styles.titleStyle}
                        selectedTitleStyle={{color: '#387ef5'}}
                        renderIcon={() => <Image style={styles.image}
                                                 source={require('../../res/images/ic_favorite.png')}/>}
                        renderSelectedIcon={() => <Image style={[styles.image, {tintColor: '#387ef5'}]}
                                                         source={require('../../res/images/ic_favorite.png')}/>}
                        onPress={() => this.setState({selectedTab: 'tab3'})}>
                        <WitAirport  navigation={this.props.navigation}/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'tab4'}
                        title="办公工具"
                        titleStyle={styles.titleStyle}
                        selectedTitleStyle={{color: '#387ef5'}}
                        renderIcon={() => <Image style={styles.image}
                                                 source={require('../../res/images/ic_favorite.png')}/>}
                        renderSelectedIcon={() => <Image style={[styles.image, {tintColor: '#387ef5'}]}
                                                         source={require('../../res/images/ic_favorite.png')}/>}
                        onPress={() => this.setState({selectedTab: 'tab4'})}>
                        <WorkTool  navigation={this.props.navigation}></WorkTool>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'tab5'}
                        title="我的信息"
                        titleStyle={styles.titleStyle}
                        selectedTitleStyle={{color: '#387ef5'}}
                        renderIcon={() => <Image style={styles.image} source={require('../../res/images/ic_my.png')}/>}
                        renderSelectedIcon={() => <Image style={[styles.image, {tintColor: '#387ef5'}]}
                                                         source={require('../../res/images/ic_my.png')}/>}
                        onPress={() => this.setState({selectedTab: 'tab5'})}>
                        <MyInfo  navigation={this.props.navigation}></MyInfo>
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    image: {
        height: 24,
        width: 24,
    },
    titleStyle: {
        fontSize: 12
    },
    tabBarStyle: {
        height: tabBarHeight,
        overflow: 'hidden'
    }
});

